<template>
    <div>
        <ul>
            <li v-for="(song, index) in displayedSongs" :key="index" @click="goToSongDetail(song.playlist_id)">
                --{{index + 1}}.{{ song.playlist_title }} ———— 热度：{{ song.popularity }}
            </li>
        </ul>
        <div class="refresh-text" @click="refreshSongs">不感兴趣？换一批</div>
    </div>
</template>

<script>
export default {
    name: 'RandomSongList',
    data() {
        return {
            songs: [
                { playlist_id: 19900, playlist_title: 'Rest V', popularity: 2602019 },
                { playlist_id: 15107, playlist_title: 'Blannebandet Nr9', popularity: 2568221 },
                { playlist_id: 17840, playlist_title: 'Tadziofonia v4', popularity: 2472870 },
                { playlist_id: 5790, playlist_title: 'New Age', popularity: 2469056 },
                { playlist_id: 12086, playlist_title: 'i0zh playlist', popularity: 2468586 },
                { playlist_id: 15708, playlist_title: 'konsertejszyn', popularity: 2448656 },
                { playlist_id: 33342, playlist_title: 'Pierwsza <3', popularity: 2419129 },
                { playlist_id: 26804, playlist_title: 'checkit2', popularity: 2417547 },
                { playlist_id: 1522, playlist_title: 'Lista de temas de...', popularity: 2409998 },
                { playlist_id: 29081, playlist_title: 'lemon jelly', popularity: 2378621 },
                { playlist_id: 30448, playlist_title: 'western music', popularity: 2225705 },
                { playlist_id: 26497, playlist_title: '1001 Discos #3', popularity: 2212183 },
                { playlist_id: 56575, playlist_title: 'psytrance,electro...', popularity: 2197588 },
                { playlist_id: 45682, playlist_title: 'Why is 200 the max?', popularity: 2161680 },
                { playlist_id: 46229, playlist_title: 'Current Favorites', popularity: 2160191 },
                { playlist_id: 43462, playlist_title: 'test', popularity: 2152520 },
                { playlist_id: 40761, playlist_title: 'Unspoilt By Progress', popularity: 2145577 },
                { playlist_id: 14118, playlist_title: '09 year', popularity: 2139844 },
                { playlist_id: 10311, playlist_title: 'turn it up.... AL...', popularity: 2122097 },
                { playlist_id: 18859, playlist_title: 'seen Live', popularity: 2117586 },
                { playlist_id: 9688, playlist_title: 'La basica', popularity: 2112195 },
                { playlist_id: 2631, playlist_title: 'Electronica/dance...', popularity: 2110823 },
                { playlist_id: 40779, playlist_title: 'General Playlist...', popularity: 21086911 },
                { playlist_id: 11430, playlist_title: 'My List 10', popularity: 2087308 },
                { playlist_id: 10338, playlist_title: 'boom chicas', popularity: 2083061 },
                { playlist_id: 46122, playlist_title: 'Workout', popularity: 2078275 },
                { playlist_id: 13998, playlist_title: 'Hitchin\' Hoedown', popularity: 2076188 },
                { playlist_id: 33653, playlist_title: 'Random 2', popularity: 2069800 },
                { playlist_id: 28341, playlist_title: 's1', popularity: 2067172 },
                { playlist_id: 43649, playlist_title: 'HxC', popularity: 2053570 },
                { playlist_id: 51575, playlist_title: 'Refugium Roxy', popularity: 2047900 },
                { playlist_id: 26616, playlist_title: 'work & study', popularity: 2036836 },
                { playlist_id: 11466, playlist_title: 'beats', popularity: 2026017 },
                { playlist_id: 22852, playlist_title: 'the others', popularity: 1998803 },
                { playlist_id: 30122, playlist_title: 'My electronic brain', popularity: 1996450 },
                { playlist_id: 56984, playlist_title: 'Coole Songs', popularity: 1955445 },
                { playlist_id: 45295, playlist_title: 'Energy', popularity: 1952015 },
                { playlist_id: 15089, playlist_title: 'P.L.U.R.', popularity: 1950247 },
                { playlist_id: 48417, playlist_title: 'My own Last.fm pr...', popularity: 1941597 },
                { playlist_id: 56839, playlist_title: 'zarduv playlist', popularity: 1939735 },
                { playlist_id: 56004, playlist_title: 'Temp', popularity: 1937460 },
                { playlist_id: 23803, playlist_title: 'Favorite: The Pro...', popularity: 1932234 },
                { playlist_id: 43428, playlist_title: 'seenLiveList', popularity: 1763449 },
                { playlist_id: 30411, playlist_title: 'Anime', popularity: 1728891 },
                { playlist_id: 3088, playlist_title: 'Ultimate playlist.', popularity: 1690447 }
            ],
            displayedSongs: []
        };
    },
    methods: {
        refreshSongs() {
            const randomIndexes = this.getRandomIndexes(5);
            this.displayedSongs = randomIndexes.map(index => this.songs[index]);
        },
        getRandomIndexes(count) {
            const indexes = [];
            const allIndexes = Array.from({ length: this.songs.length }, (_, i) => i);
            for (let i = 0; i < count; i++) {
                const randomIndex = Math.floor(Math.random() * allIndexes.length);
                indexes.push(allIndexes.splice(randomIndex, 1)[0]);
            }
            return indexes;
        },
        goToSongDetail(playlistId) {
            // 假设您的路由配置了 /song-detail/:id 路径
            // 其中 :id 是一个动态参数，用于接收歌单的 ID
            this.$router.push({path: `/playlist-detail/${playlistId}`});
        }
    },
    mounted() {
        this.refreshSongs();
    }
};
</script>

<style scoped>
h2 {
    font-family: Arial, sans-serif;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    font-size: large;
    margin: 10px 0;
    cursor: pointer;
}
li:hover {
    text-decoration: underline;
}

.refresh-text {
    cursor: pointer;
    margin-top: 0px;
    padding: 20px;
    font-size: 16px;
    color: #007bff;
    text-decoration: underline;
}

.refresh-text:hover {
    text-decoration: none;
    color: #0056b3;
}
</style>